<template>
  <div class="mgtUserName">
    <x-header v-show="!isWeChar">
      <div slot="default" class="common__header--title">修改姓名</div>
      <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
    </x-header>
    <div class="mgtUserName_inputDiv">
      <x-input v-if="haveUserName" v-model="oldUserName" class="mgtUserName_inputDiv-oldName" readonly text-align="center">
        <span slot="label" style="display:block;">原姓名：</span>
      </x-input>
      <x-input v-model="userName" :min="StrLenth.userNameMin" :max="StrLenth.userNameMax" placeholder="请输入姓名">
        <img slot="label" style="padding-right:10px;width: 19px;margin-left: -3px;display:block;" src="~assets/x3/ico/ico-input-header.png" width="18">
      </x-input>
      <x-input v-model="imgCode" :max="StrLenth.img" placeholder="请输入图形码">
        <img slot="label" style="padding-right:10px;padding-top:5px;display:block;" src="~assets/x3/ico/ico-input-img_code.png" width="18">
        <span slot="right" class="img__code--change" @click="changeImgCode()">换一张</span>
        <img slot="right" class="img__code" :src="imgCodeSrc" @click="changeImgCode()">
      </x-input>
    </div>
    <div class="mgtUserName_errorMsg" v-show="haveError">
      <badge text="!"></badge> {{errorMessage}}
    </div>
    <x-button text="确认" @click.native="processForm" type="primary" class="mgtUserName_process_btn"></x-button>
  </div>
</template>
<script>
import { XHeader, XInput, XButton, Badge, Alert, AlertPlugin } from "vux";
import { RouteUrl, Mutations, StrLenth } from "src/common/const";
import { RequestUrl } from "src/common/url";
import { mapState } from "vuex";
import Validation from "src/common/util/validation";

export default {
  components: { XHeader, XInput, XButton, Badge, Alert, AlertPlugin },
  computed: mapState(["user", "isWeChar"]),
  data() {
    return {
      StrLenth: {}, //字符长度常量
      haveError: false, //是否显示错误
      errorMessage: "", //错误信息
      imgCodeSrc: RequestUrl.GET_VALIDATE_CODE, //验证码图片路径
      imgCode: "", //图形码
      oldUserName: "",
      userName: "",
      haveUserName: false //有无填写姓名
    };
  },
  methods: {
    //返回
    goBack() {
      this.$common.goBackUrl(this, RouteUrl.ACCOUNT);
    },
    changeImgCode() {
      this.imgCodeSrc = RequestUrl.GET_VALIDATE_CODE + "?a=" + Math.random();
    },
    //提交
    processForm() {
      let initData = {
        TYPE: "FORM",
        id: this.user.userDto.userCode,
        userName: this.userName,
        imgCode: this.imgCode
      };
      //校验-姓名
      let msg = Validation.isUserName(initData.userName);
      if (msg != null) {
        this.errorMessage = msg;
        this.haveError = true;
        return;
      }
      //校验-图形码
      msg = Validation.isImgCode(initData.imgCode);
      if (msg != null) {
        this.errorMessage = msg;
        this.haveError = true;
        return;
      }
      this.haveError = false;
      this.errorMessage = "";
      let _this = this;
      _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);
      //提交
      _this.$http.post(RequestUrl.UPDATE_USER_NAME, initData).then(function (res) {
        _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
        if (res.state != 0) {
          if (res.result == "图形码过期" || res.result == "图形码错误") {
            _this.changeImgCode();//更换图形验证码
          }
          _this.errorMessage = res.result;
          _this.haveError = true;
          return;
        }
        //保存USER_INFO信息
        _this.$common.storeCommit(_this, Mutations.SAVE_USER_INFO, res.result);

        //3s后自动或关闭窗口跳转到登录
        let showTime = setTimeout(() => {
          _this.$vux.alert.hide();
          _this.$common.goUrl(_this, RouteUrl.ACCOUNT);
        }, 3000);
        //提示信息
        _this.$vux.alert.show({
          content: _this.$common.alertMsg("修改成功", "green;"),
          onHide() {
            clearTimeout(showTime);
            _this.$common.goUrl(_this, RouteUrl.ACCOUNT);
          }
        });

      });
    },
    initPage() {
      if (this.user.isLogin) {
        let userDto = this.user.userDto;
        //用户原姓名
        if (!this.$common.isEmpty(userDto.userName)) {
          this.oldUserName = userDto.userName;
          this.haveUserName = true;
        }
      } else {
        this.$common.goUrl(this, RouteUrl.LOGIN);
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    sessionStorage["MGT_USER_NAME_FORM_URL"] = from.path;
    next();
  },
  beforeMount() {
    if (sessionStorage["MGT_USER_NAME_FORM_URL"] == "/") {
      this.$common.goUrl(this, RouteUrl.ACCOUNT);
    }
  },
  mounted() {
    document.title = "修改姓名";
    this.StrLenth = StrLenth; //字符长度常量
    this.$init.subPageInit(this);
    //初始化当前页面信息
    this.initPage();
  }
};
</script>
<style lang="scss" scoped>
//input区域
.mgtUserName_inputDiv {
  margin: 15px auto;
  width: 95%;
  height: auto;
  border-radius: 5px;
  background-color: white;
  span {
    font-size: 14px;
  }
  .weui-cell {
    border-top: 1px solid #efefef;
  }
  .weui-cell:before {
    border-top: 0px;
  }
}

.mgtUserName_inputDiv-oldName {
  background-color: #dfdfdf;
}

//图形码
.img__code {
  width: 80px;
  height: 31px;
  margin-left: 3px;
  vertical-align: middle;
}

//换一张图形码
.img__code--change {
  margin-left: 3px;
  vertical-align: middle;
  font-size: 12px;
}

//提交按钮
.mgtUserName_process_btn {
  width: 95%;
  font-size: 20px;
}

//错误信息
.mgtUserName_errorMsg {
  color: red;
  font-size: 14px;
  margin-left: 10px;
  height: 36px;
}

//弹窗信息
.weui-dialog__bd {
  height: 30px;
  line-height: 30px;
}

//修改默认按钮失效时背景颜色
.weui-btn_disabled.weui-btn_primary {
  background-color: #cfcfcf;
}
</style>
